<%@page import="java.net.URLDecoder"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>登录页面</title>
		<style type="text/css">
			form{
				width: 600px;
				height: auto;
				margin: 0px auto;
				border: solid 1px red;
			}
		</style>
		<script type="text/javascript">
			//验证用户名
			function isUname(){
				//获得用户名的文本框的值
				var uname=document.getElementById("uname").value;
				//用户名的正则表达式
				var regUname=/^[a-zA-Z0-9_\u4e00-\u9fa5]{2,5}$/;
				
				if (regUname.test(uname)) {
					//
					document.getElementById("uname1").innerHTML="";
					return true;
				} else{
					document.getElementById("uname1").style.color="red";
					document.getElementById("uname1").innerHTML="用户名输入有误!";
					return false;
				}
			}
			
			//验证密码
			function isPwd(){
				//获得用户输入的密码
				var pwd=document.getElementById("pwd").value;
				//密码正则表达式
				var regPwd=/^\d{6}$/;
				if(regPwd.test(pwd)){
					document.getElementById("pwd1").innerHTML="";
					return true;
				}else{
					document.getElementById("pwd1").style.color="red";
					document.getElementById("pwd1").innerHTML="密码输入有误!";
					return false;
				}
			}
			
			//验证验证码
			function isCode(){
				//获得用户输入的验证码
				var code=document.getElementById("code").value;
				if (code.length==4) {
					return true;
				}else{
					alert("验证码的输入有误!");
					return false;
				}
			}
			
			//表单提交事件
			function check(){
				//验证用户名结果
				var unameResult=isUname();
				//验证密码结果
				var pwdResult=isPwd();
				
				//表单的所项符合要求就要提交表单,否则阻止表单提交
				if(unameResult&&pwdResult&&isCode()){
					return true;
				}else{
					return false;
				}
			}
			
			//刷新验证码
			function nolook(){
				//内存图片有缓存,当第一次请求一张内存图片时,后台会生成一个内存返回给客户端,然后在内存缓存内存图片
				//当客户端第二次发送同样的请求来请求内存图片时,后台会根据上次请求的缓存的内存图片发给客户端.
				//想每次请求内存图片时,都能重新万生成一张新内存图片,就得每次发送不同请求URL,就会重新生成内存图片
				document.getElementById("ckcode").src="CheckCodeServlet?r="+new Date();
			}
			
		</script>
	</head>
	<body>
		<!-- 用小脚本可以写java代码,获得cookie记住用户信息 -->
		<%
			//声明两个变量存cookie中获得的用户名和密码
			String uname2="";
			String pwd2="";
		
			//获得所有cookie
			Cookie[] cs=request.getCookies();
			if(cs!=null){
				//遍历cookie,找到用户名和密码存下来
				for(Cookie c:cs){
					if(c.getName().equals("uname1")){
						//将用户名解码
						uname2=URLDecoder.decode(c.getValue(), "utf-8");
					}else if(c.getName().equals("pwd1")){
						pwd2=c.getValue();
					}
				}
			}
			
			request.setAttribute("uname2", uname2);
			request.setAttribute("pwd2", pwd2);
		%>
		<!--表单-->
		<form method="get" action="CommonServlet" onsubmit="return check()">
			<!-- 用隐藏域传递标记参数 -->
			<input type="hidden" name="method" value="login"/>
			<table>
				<tr>
					<td></td>
					<td><h1>登录页面</h1></td>
					<td></td>
				</tr>
				<tr>
					<td>用户名:</td>
					<!-- 表达式,在浏览中输出变量的值 -->
					<td><input type="text" id="uname" name="name" onblur="isUname()" value="${uname2}"/></td>
					<td id="uname1">必填项,长度为2-5的汉字,字母,数字或_</td>
				</tr>
				<tr>
					<td>密码:</td>
					<!-- 表达式,在浏览中输出变量的值 -->
					<td><input type="password" id="pwd" name="password" onblur="isPwd()" value="${pwd2}"/></td>
					<td id="pwd11">必填项,6位数字</td>
				</tr>
				<tr>
					<td>登录身份:</td>
					<!-- 表达式,在浏览中输出变量的值 -->
					<td>
						<input type="radio" name="role" value="student" checked="checked"/>学生
						<input type="radio" name="role" value="teacher" />老师
					</td>
					<td id="pwd1">必填项,6位数字</td>
				</tr>
				<tr>
					<td>验证码:</td>
					<td><input type="text" id="code" name="code" onblur="isCode()"/></td>
					<td><img id="ckcode" src="CheckCodeServlet"  onclick="nolook()"/><a onclick="nolook()">看不清</a></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="checkbox" name="rememberMe"/>记住我</td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td>
						<!--提交按纽-->
						<input type="submit" value="登录"/>
						<!--重置按纽-->
						<input type="reset" value="重置"/>
					</td>
					<td></td>
				</tr>
			</table>
		</form>
	</body>
</html>